<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边菜单</title>
    <style type="text/css">
        body {
            margin: 0;
            background-image: linear-gradient(to right, #fbd787, #c6ffdd);
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        .menu {
            width: 300px;
            /* height: 700px; */
            background-color: rgba(255,255,255, 0.6);
            margin: 50px auto 0px;
        }

        .menu ul{
            padding: 20px 0px;
        }

        .menu ul li {
            /* border: 1px solid #ddd; */
            height: 42px;
            line-height: 42px;
        }

        .menu ul li a{
            /* border: 1px solid red; */
            display: block;
            /* padding-left: 20px; */
            text-indent: 2em; /* 文字首行与左侧的距离 */
            color: #000;
            background-image: url('images/right-arrow.png');
            background-size: 30px;
            background-repeat: no-repeat;
            background-position: 255px center;
        }

        .menu ul li a:hover{
            background-color: #ff6700;
            color: #fff;
            background-image: url('images/right-arrow-white.png');
        }


    </style>

</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="">手机</a></li>
            <li><a href="">电视</a></li>
            <li><a href="">笔记本 平板</a></li>
            <li><a href="">家电</a></li>
            <li><a href="">出行 穿戴</a></li>
            <li><a href="">智能 路由器</a></li>
            <li><a href="">电源 配件</a></li>
            <li><a href="">健康 儿童</a></li>
            <li><a href="">耳机 音箱</a></li>
            <li><a href="">生活 箱包</a></li>
        </ul>
    </div>
    
</body>
</html>